<template>
    <div>
        <div class="imgbox">
            <img src="../../assets/img/团队logo.jpg" width="135px" height="135px"/>
        </div>
        <el-menu :default-active="activeIndex" class="el-menu-demo nva_style" mode="horizontal" @select="handleSelect">
            <el-row>
                <el-col :span="7">
                    <div class="grid-content"></div>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                    <h1 class="">半点时光甜品店</h1>-->
                <!--                </el-col>-->
                <el-col :span="2">
                    <el-menu-item index="4" @click="uindex()">首页</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="cakes()">蛋糕班戟</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="desserts()">清凉解暑</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="puddings()">蛋挞布丁</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-submenu index="2">
                        <template slot="title">用户中心</template>
                        <el-menu-item index="2-1" @click="shoppingCart()">购物车</el-menu-item>
                        <el-menu-item index="2-2" @click="edit()">信息修改</el-menu-item>
                        <el-menu-item index="2-3" @click="loginOut()">退出登录</el-menu-item>
                    </el-submenu>
                </el-col>
                <el-col :span="3">
                </el-col>
            </el-row>
        </el-menu>
        <el-row class="er1">
            <el-col :span="3">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="18">
                <div class="el-icon-video-camera-solid">蛋糕班戟</div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-row>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[0].cakePic class="table-td-thumb"  @click="cake(cake_img[0].cakeId )">
                                <h5>{{cake_img[0].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[0].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                            <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[1].cakePic class="table-td-thumb"   @click="cake(cake_img[1].cakeId )">
                                <h5>{{cake_img[1].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[1].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                            <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[2].cakePic class="table-td-thumb"  @click="cake(cake_img[2].cakeId )">
                                <h5>{{cake_img[2].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[2].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                            <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[3].cakePic class="table-td-thumb"  @click="cake(cake_img[3].cakeId )">
                                <h5>{{cake_img[3].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[3].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                        </el-row>
                        <el-row class="er2">
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[4].cakePic class="table-td-thumb"  @click="cake(cake_img[4].cakeId )">
                                <h5>{{cake_img[4].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[4].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                            <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[5].cakePic class="table-td-thumb"   @click="cake(cake_img[5].cakeId )">
                                <h5>{{cake_img[5].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[5].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                            <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[6].cakePic class="table-td-thumb"  @click="cake(cake_img[6].cakeId )">
                                <h5>{{cake_img[6].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[6].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                            <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <img :src=cake_img[7].cakePic class="table-td-thumb"  @click="cake(cake_img[7].cakeId )">
                                <h5>{{cake_img[7].cakeName}}</h5>
                                <div class="block">
                                    <el-rate
                                            disabled
                                            v-model="cake_img[7].grade"
                                            :colors="colors">
                                    </el-rate>
                                </div>
                            </div></el-col>
                        </el-row>
                </el-tabs>

            </el-col>
            <el-col :span="3">
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "UserCakes",

        data(){
            return {
                activeName: 'second1',
                cake_img:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达",grade:3.7},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                cake_img2:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达",grade:3.7},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                cake_img3:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达",grade:3.7},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                cake_img4:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达",grade:3.7},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}]
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                axios.get("http://localhost:8083/cake/getCakeAll")
                    .then(response => {
                        if(response.data){
                            console.log(response.data);
                            this.cake_img = [];
                            this.cake_img = response.data;
                            this.cake_img2 = [];
                            this.cake_img2= response.data;
                            this.cake_img3 = [];
                            this.cake_img3 = response.data;
                            this.cake_img4 = [];
                            this.cake_img4 = response.data;
                        }
                    })
                    .catch(error => {
                        console.log(error.message);
                        alert(error.message);
                    })
            },
            regist(){
                this.$router.push('/u_regist');
            },
            shoppingCart(){
                if(1){
                    this.$router.push('/u_cart');
                }
                else{
                    this.$router.push('/Judge');
                }
                // this.$router.push('/u_person');

            },
            enter(){
                // if(isLogin()){
                //     this.$router.push('/u_person');
                // }
                // else{
                //     this.$router.push('/u_login');
                // }
                this.$router.push('/u_person');

            },
            loginOut(){
                localStorage.removeItem('telephone');
                this.$message.success('退出成功');
                this.$router.push('/u_login');
            },
            cake(mid){
                this.$router.push({
                    path: "/u_movie",
                    query: { mid: mid }
                });
            },
            u_book(mid){
                this.$router.push('/u_book');
            },
            u_music(mid){
                this.$router.push('/u_music');
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleClick2(tab, event) {
                console.log(tab, event);
            },
            uindex(){
                this.$router.push('/u_login_index');
            },
            cakes(){
                this.$router.push('/u_movies');
            },
            desserts(){
                this.$router.push('/u_books');
            },
            puddings(){
                this.$router.push('/u_musics');
            }

        },
        mounted() {
        }
    }
</script>

<style scoped>
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 260px;
        height: 340px;
    }
    .imgbox{
        text-align: center;
    }
</style>
